import React,{useCallback,useContext,useState,useEffect} from 'react'
import {SearchpageWrapper} from './styledSearch'
import Navbar from '@/components/Navbar/Navbar'
import left from '@/assets/images/left.png'
import {useHistory} from 'react-router-dom'
import { SearchBar, Button, WhiteSpace, WingBlank } from 'antd-mobile';
import httpContext from '@/context/httpContext'
export default function Searchpage() {
    const history =useHistory()
    const {get} =useContext(httpContext)

    const handleClick=useCallback(
        ()=>{
            history.goBack()
        }
    )
    const handleSearchClick=useCallback(
         (val)=>{
        //     let list2,list1
        //     let res=await get({
        //         url:'search.json'
        //     })
        //    list2=res.data.productList
        //    list1= _.filter(list2,function(o){
        //     if(_.includes(o.title.toLowerCase(),val.toLowerCase())){
        //         return o
        //     }
        // })
      
        // }
            history.push('/list',{
                keyword:val
            })
        })
    
    
    const handleLiClick=useCallback(
        (e)=>{
            if(e.target.nodeName==='LI'){
                history.push('/list',{
                    keyword:e.target.innerHTML
                })
            }

        }
    )
    return (
        <SearchpageWrapper>
             <Navbar
                title='搜索'
                icon={left}
                color='#F8F8F8'
                onClick={handleClick}
            >
            </Navbar>
            <SearchBar 
            placeholder="Search" 
            maxLength={8} 
            onSubmit={handleSearchClick}
            />
            <div className='hotsearch'>
                <p>热门搜索</p>
                <ul onClick={handleLiClick}>
                    <li>AJ11白蓝康扣</li>
                    <li>TS270</li>
                    <li>冰淇淋</li>
                    <li>得物原创鞋盒2.0</li>
                    <li>人气新品潮服</li>
                    <li>AJ1蓝黑脚趾</li>
                    <li>YEEZE 350</li>
                    <li>AJ6兔八哥</li>
                    <li>卡西欧</li>
                    <li>Human Made</li>
                    <li>T恤</li>
                    <li>AJ1</li>
                    <li>LV</li>
                    <li>OFF-WHITE</li>
                    <li>Air Force</li>
                    <li>FOG</li>
                    <li>Supreme</li>
                    <li>李佳奇推荐</li>
                </ul>
            </div>
        </SearchpageWrapper>
    )
}
